import React, { Component } from 'react';
import { progressConfig } from '../config';
import styles from './index.less';

const {
  defaultFrontColorWithBg,
  defaultFrontColor,
  defaultBackgroundColor,
  defaultStrokeWidth,
} = progressConfig;

class DoubleProgress extends Component {
  state = {
    viewportScale: window.viewportScale,
  };

  componentDidMount() {
    window.addEventListener('resize', this.resize, { passive: true });
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.resize);
  }

  resize = () => {
    this.setState({ viewportScale: window.viewportScale });
  };

  render() {
    const { viewportScale } = this.state;
    const {
      style,
      color,
      backgroundColor = defaultBackgroundColor,
      strokeWidth = defaultStrokeWidth,
      percentOut = 0,
      percentInner = 0,
      hiddenBg,
      showValue,
      value,
    } = this.props;
    const frontColor = color || (hiddenBg ? defaultFrontColor : defaultFrontColorWithBg);
    return (
      <div className={`${styles.miniProgress} ${showValue ? styles.flexBox : ''}`} style={style}>
        <div className={showValue ? styles.flexInner : ''}>
          <div
            style={{
              width: percentOut ? `${percentOut > 100 ? 100 : percentOut}%` : '0.1%',
              height: strokeWidth * viewportScale,
            }}
          >
            <div
              className={styles.progressWrap}
              style={{
                background: backgroundColor,
              }}
            >
              <div
                className={styles.progress}
                style={{
                  background: frontColor,
                  width: percentInner ? `${percentInner > 100 ? 100 : percentInner}%` : null,
                  height: strokeWidth * viewportScale,
                }}
              />
            </div>
          </div>
        </div>
        {showValue && <div style={{ width: '1.3rem' }}>{value}</div>}
      </div>
    );
  }
}

export default DoubleProgress;
